<template>
    <div id="app">
        <el-breadcrumb separator-class="el-icon-arrow-right" separator="/">
            <el-breadcrumb-item :to="{ path: 'list' }">社区管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: 'list' }">主题管理</el-breadcrumb-item>
            <el-breadcrumb-item>新增主题</el-breadcrumb-item>
        </el-breadcrumb>
        <el-col :span="6" :offset="9" style="padding-top: 80px">
            <el-form ref="form" :model="form" label-width="120px" class="create">
                <el-form-item label="主题：">
                    <el-input v-model="form.name" placeholder="请输入主题" ></el-input>
                </el-form-item>
                <el-form-item label="描述：">
                    <el-input v-model="form.remark" placeholder="请输入内容" ></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button @click="onCancel">取消</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </div>
</template>

<script>
    import { create } from '../../../../module/admin/community/communityInfo';
    import { Message } from 'element-ui';
    export default {
        data () {
            return {
                form: {
                    name: '',
                    remark: ''
                }
            }
        },
        methods: {
            onSubmit() {
                let _this = this;
                create(this.form).then(function (data) {
                    _this.$message({
                        type: 'success',
                        center: true,
                        message: '添加主题成功!'
                    });
                }).catch(function (error) {
                    _this.$message({
                        type: 'error',
                        center: true,
                        message: '添加主题失败!'
                    });
                });
                this.$router.push({
                    name: "admin-community-info-list"
                })
            },
            onCancel() {
                this.$router.push({
                    name: "admin-community-info-list"
                })
            },
        },

    }
</script>

<style>
    .create .el-step {
        cursor: pointer;
    }

    .create .el-input, .create .el-date-editor.el-input {
        width: 200px;
    }

</style>
